<template>
    <div class="native-hls-container">
      <video 
        ref="videoRef"
        controls
        muted
        autoplay
        playsinline
        class="native-video"
        @mouseenter="showNativeControls"
      ></video>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import Hls from 'hls.js'

  const props = defineProps({
    src: {
      type: String,
      required: true
    }
  })
  watch(()=>props.src,()=>{
    if(props.src){
        initPlayer()
    }
})
  const videoRef = ref(null)
  let hls = null
  
  // 初始化HLS播放器
  const initPlayer = () => {
    if (Hls.isSupported()) {
      hls = new Hls({
        maxLoadingDelay: 5000,
        enableWorker: true,
        lowLatencyMode: true
      })
      hls.attachMedia(videoRef.value)
      hls.loadSource(props.src)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.value.play()
      })
    } else if (videoRef.value.canPlayType('application/vnd.apple.mpegurl')) {
      videoRef.value.src = props.src
      videoRef.value.addEventListener('loadedmetadata', () => videoRef.value.play());
    }else{
    }
  }
  
  // 强制显示原生控制条（浏览器兼容处理）
  // const showNativeControls = () => {
  //   videoRef.value.removeAttribute('controls')
  //   setTimeout(() => {
  //     videoRef.value.setAttribute('controls', '')
  //   }, 50)
  // }
  
  onMounted(()=>{
    if(props.src){
        initPlayer()
    }
  })
  onUnmounted(() => {
    if (hls) {
      hls.destroy()
    }
  })
  </script>
  
  <style>
  /* Chrome/Safari 原生控制条样式优化 */
  .native-video::-webkit-media-controls-panel {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .native-video:hover::-webkit-media-controls-panel {
    opacity: 1;
  }
  
  /* Firefox 样式优化 */
  .native-video::-moz-media-controls-panel {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .native-video:hover::-moz-media-controls-panel {
    opacity: 1;
  }
  
  /* 通用样式 */
  .native-hls-container {
    position: relative;
    /* max-width: 1000px; */
    margin: 0 auto;
    background: #000;
  }
  
  .native-video {
    width: 100%;
    height: 100%;
    /* aspect-ratio: 16/9; */
  }
  </style>